<script lang="ts" setup>
import { reactive, onActivated } from 'vue'
import { useTable } from '@/hooks/useTable'
import { queryStoreBox } from '@/api/store'
import { queryStoreBoxTableCol } from '@/api/store/types/store'
import { getToken } from '@/utils/cache/cookies'
import CabinetTable from '@/components/table/CabinetTable.vue'
import { CabinetBikeTablePageType } from '@/types/enum'
import GoButton from '@/components/basic/GoButton.vue'
import IdForm from '@/components/form/IdForm.vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const form = reactive({
  boxCode: '',
  storeId: route.query.storeId
})

const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryStoreBoxTableCol>(queryStoreBox, getToken() ?? '', () => form)

const cabinetAMap = () => {
  router.push({
    name: 'CabinetAMap',
    query: {
      storeId: route.query.storeId
    }
  })
}
const onSubmit = () => {
  // 提交表单的逻辑
  setCurrentPage(1)
  load()
}
const setId = (id: string) => {
  form.storeId = id
}
defineExpose({ load, setId })
onActivated(() => {
  form.storeId = route.query.storeId
})
</script>

<template>
  <id-form v-model="form" type="cabinet" @search="onSubmit">
    <template #after>
      <el-form-item style="float: right">
        <go-button icon-name="cabinet" @click="cabinetAMap">
          <template #text>
            <span>电柜地图</span>
          </template>
        </go-button>
      </el-form-item>
    </template>
  </id-form>
  <cabinet-table :data="data" :loading="loading" :page="CabinetBikeTablePageType.OperatorsInfo" />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
